import React from 'react';
import router from 'umi/router';
import moment from 'moment';

import { connect } from 'dva';

import { Button,Form, Input, InputNumber, Select, DatePicker } from 'antd';

const FormItem = Form.Item;
const { Option } = Select;

const linePath = '/HR/HrExpense';

@connect(({
  hrExpense, hrEmployee, productProduct, accountAccount, accountTax, accountAnalyticAccount
}) => ({
  hrExpense, hrEmployee, productProduct, accountAccount, accountTax, accountAnalyticAccount

}))
class FormCreate extends React.Component {
  state = {
  }

  id = 0

  async componentDidMount() {
    const { location: {query: { id } } } = this.props;
    this.id = Number(id)
    if (this.id) {
      const { dispatch } = this.props;
      await dispatch({
        type: 'hrExpense/view',
        payload:  { id: this.id }
      });

    }

    // 获取多对一字段的下拉列表框选项所需要的数据

    const { dispatch } = this.props;
    await dispatch({
      type: 'hrEmployee/search',
      payload: {domain:[], fields:{} },
    });

    await dispatch({
      type: 'productProduct/search',
      payload: {domain:[], fields:{} },
    });

    await dispatch({
      type: 'accountAccount/search',
      payload: {domain:[], fields:{} },
    });

    await dispatch({
      type: 'accountTax/search',
      payload: {domain:[], fields:{} },
    });

    await dispatch({
      type: 'accountAnalyticAccount/search',
      payload: {domain:[], fields:{} },
    });


  }

  handleSubmit = e => {
    const { dispatch, form } = this.props;
    e.preventDefault();

    const create_or_write = async (vals) => {
      if(this.id){
        await dispatch({
          type: 'hrExpense/write',
          payload : {
            id: this.id,  vals,
          },
        });

        router.push(`${linePath}?id=${this.id}`);
      }
      else{
        await dispatch({
          type: 'hrExpense/create',
          payload : {
            vals,
          },
        });

        const { hrExpense:{record} } = this.props;

        if (record.id){
          router.push(`${linePath}?id=${record.id}`);
        }
      }

    }


    form.validateFieldsAndScroll( async (err, values) => {

      if (!err) {

        const { date } = values;
        const vals = { ...values,
          date: date.format('YYYY-MM-DD'),
        };

        await create_or_write(vals)

      }
    });
  };


  render() {
    const { form: { getFieldDecorator }  } = this.props;
    const { hrExpense: { record } } = this.props;
    const { hrEmployee: { recordsList: employeeList }} = this.props;
    const { productProduct: { recordsList: productList } } = this.props;
    const { accountAccount: { recordsList: accountList } } = this.props;
    const { accountTax: { recordsList: taxList } } = this.props;
    const { accountAnalyticAccount: { recordsList: analyticList } } = this.props;

    return (
      <div>
          <Form onSubmit={this.handleSubmit}>
            <FormItem style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" >提交
              </Button>
            </FormItem>

            <FormItem label="名称">
              {getFieldDecorator('name', {
                rules: [{ required: true }],
                initialValue: record.name ,
              })(
                <Input />
              )}
            </FormItem>

            <FormItem label="日期">
              {getFieldDecorator('date', {
                rules: [{ required: true }],
                initialValue: record.date ? moment(record.date, 'YYYY-MM-DD') : moment()
              })(<DatePicker />)}
            </FormItem>

            <FormItem label="员工">
              {getFieldDecorator('employee_id', {
                rules: [{ required: true }],
                initialValue: record.employee_id && record.employee_id.id
              })(
                <Select placeholder="" >
                  <Option value={0} >未选择</Option>
                  {employeeList.map(item => {
                    return (
                      <Option value={item.id} key="id">
                        {item.name}
                      </Option>
                    );
                  })}

                </Select>

              )}
            </FormItem>

            <FormItem label="费用">
              {getFieldDecorator('product_id', {
                //rules: [{ required: true }],
                initialValue: record.product_id ? record.product_id.id : 0
              })(
                <Select
                  placeholder="产品或服务项目" >
                  <Option value={0} >未选择</Option>
                  {productList.map(item => {
                    return (
                      <Option value={item.id} key="id">
                        {`${item.code} ${item.name}`}
                      </Option>
                    );
                  })}

                </Select>

              )}
            </FormItem>


            <FormItem label="科目">
              {getFieldDecorator('account_id', {
                //rules: [{ required: true }],
                initialValue: record.account_id ? record.account_id.id : 0
              })(
                <Select
                  placeholder="科目" >
                  <Option value={0} >未选择</Option>
                  {accountList.map(item => {
                    return (
                      <Option value={item.id} key="id">
                        {`${item.code} ${item.name}`}
                      </Option>
                    );
                  })}

                </Select>

              )}
            </FormItem>


            <FormItem label="单价">
              {getFieldDecorator('unit_amount', {
                rules: [{ required: true }],
                initialValue: record.unit_amount || 0,
              })(
                <InputNumber />
              )}
            </FormItem>


            <FormItem label="数量">
              {getFieldDecorator('quantity', {
                rules: [{ required: true }],
                initialValue: record.quantity || 0,
              })(
                <InputNumber />
              )}
            </FormItem>


            <FormItem label="支付类型">
              {getFieldDecorator('payment_mode', {
                rules: [{ required: true }],
                initialValue: record.type || 'own_account'
              })(
                <Select
                  placeholder="账簿" >
                  <Option value={'own_account'} >个人报销</Option>
                  <Option value={'company_account'} >公司</Option>
                </Select>

              )}
            </FormItem>

            <FormItem label="税">
              {getFieldDecorator('tax_ids', {
                //rules: [{ required: true }],
                initialValue: record.tax_ids
                   && record.tax_ids.map(item=>item.id)

              })(
                <Select mode="multiple"
                  placeholder="税" >
                  <Option value={0} >未选择</Option>
                  {taxList.map(item => {
                    return (
                      <Option value={item.id} key="id">
                        {`${item.code} ${item.name}`}
                      </Option>
                    );
                  })}

                </Select>

              )}
            </FormItem>


            <FormItem label="分析科目">
              {getFieldDecorator('analytic_account_id', {
                rules: [{ required: true }],
                initialValue: record.analytic_account_id ? record.analytic_account_id.id : 0
              })(
                <Select placeholder="分析科目">
                  <Option value={0} >未选择</Option>
                  {analyticList.map(item => {
                    return (
                      <Option value={item.id} key="id">
                        {`${item.code} ${item.name}`}
                      </Option>
                    );
                  })}

                </Select>

              )}
            </FormItem>


            <FormItem label="参照">
              {getFieldDecorator('reference', {
                //rules: [{ required: true }],
                initialValue: record.reference,
              })(
                <Input />
              )}
            </FormItem>

            <FormItem label="备注">
              {getFieldDecorator('description', {
                //rules: [{ required: true }],
                initialValue: record.description,
              })(
                <Input />
              )}
            </FormItem>

          </Form>


      </div>

    );
  }
}


export default Form.create()(FormCreate);


